<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化</title>
</head>
<body>
<div id="app"></div>

  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">

    //头组件
    var MyHeader = {
      template:'<div>我是头部</div>'
    }
    var MyBody = Vue.extend({
      template:'<div>我是函数调用方式的中部</div>'
    })
    //语法糖
    /*var MyBody = {
      template:'<div>我是中部</div>'
    }*/
    var MyFooter = {
      template:`
        <div>
          我是底部<button @click="showNum(123)">点我</button>
        </div>
      `,
      methods:{
        showNum:function(num) {
          alert(num);
        }
      }
    }

    //组件入口
    var App = {
      components:{
        'my-header': MyHeader,
        'my-body': MyBody,
        'my-footer': MyFooter,
      },
      template:`
        <div>
          <my-header/>
          <my-body/>
          <my-footer/>
        </div>
      `
    };

    //可以使用单标签如以下<app/>
    new Vue({
      el: '#app',
      components: { //声明要用的组件们
        // key是组件名，value是组件对象
        app: App
      },
      template: '<app/>'
    });

  </script>
</body>
</html>
